<template>
    <div class="capsule">
        <div class="value" :style="{width:value}"></div>
    </div>
</template>

<script>
export default {
    name:"capsuleChart",
    props:{
        value:{
            type:String,
            default:"0%"
        }
    }
}
</script>

<style lang="scss">
.capsule{
    display: inline-block;
    position: relative;
    width: 17.69rem;
    height: 0.769rem;
    border-radius: 0.3rem;
    background: rgba(255, 255, 255, 0.2);
    .value{
        position: absolute;
        height:100%;
        left:0;
        top:0;
        background:linear-gradient(to right, rgb(43,183,255), #FCB33A);
        border-radius: 0.3rem;
    }
}
</style>